<style type="text/css">
    .circle{
        width: 20px;
        height: 20px;
        background-color:red;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;    }
</style>



<div>

    <div class="panel panel-default">
        <div class="panel-body">
            <div>当前是第{{gameProperties.gameRound}}回合,{{gameProperties.gameStage}}阶段</div>
            <div>现在是<span>{{gameProperties.currentPlayer.userName}}</span>的回合，颜色是<span style="background-color: {{gameProperties.currentPlayer.color}}">&nbsp;&nbsp;&nbsp;&nbsp;</span></div>

            <div ng-if="gameProperties.gameStage == 'STAGE_MOVE'">剩余移动步数:{{gameProperties.currentPlayer.movedSurplus}}/{{gameProperties.currentPlayer.moveSpaces}}</div>
            <div ng-if="gameProperties.gameStage == 'STAGE_ACTION'">
                已经执行的行动:1<br/>
                未执行的行动:2
            </div>

            <div class="input-group">
                <input type="text" class="form-control" placeholder="moveto 9-0" ng-model="GameSyntax.syntax" ng-init="GameSyntax.syntax = 'moveto 9-0'">
                <span class="input-group-btn"><button class="btn btn-default" type="button" ng-click="syntaxSubmit()">submit</button></span>
                <span class="input-group-btn"><button class="btn btn-default" type="button" ng-click="GameSyntax.syntax = 'pass';syntaxSubmit()">pass</button></span>
            </div>

        </div>
    </div>


    <!--铁路-->
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                Railroad track
            </div>
            <div class="panel-body">
                sss
            </div>
        </div>

    </div>

    <!--地图-->
    <div id="map">

        <div class="row" ng-repeat="index in [14,13,12,11,10,9,8,7,6,5,4,3,2,1,0]">
            <div class="col-xs-{{space.size}} col-md-{{space.size}}  col-md-offset-{{space.offset}}" ng-repeat="space in gameProperties.listSpace|filter: { row: index }:true | orderBy:'column' ">
                <div class="panel panel-default" style="">
                    <div class="panel-body" style="border:{{space.bordersize}}px solid {{space.bordercolor}};text-align:center">
                        <div class="row">
                            {{space.row}} - {{space.column}}
                            <span class="badge" style="background-color: {{player.color}}" ng-repeat="player in space.listPlayer">&nbsp</span>

                            <!--<div class="circle"></div>-->
                        </div>
                        <!--建筑板块-->
                        <div ng-show="space.gwtSpaceTile">
                            <span style="color:{{space.gwtSpaceTile.color}}">{{space.gwtSpaceTile.info}}</span>
                            <!--行动-->
                            <div  ng-if="space.gwtSpaceTile.listDoAction!=null">
                                <!--<ul class="list-group">-->
                                    <!--<li class="list-group-item" ng-if="space.gwtSpaceTile.listChooseAction!=null && space.gwtSpaceTile.listChooseAction.length>0">-->
                                        <!--| <span ng-repeat="action in space.gwtSpaceTile.listChooseAction"  ng-click="openClickWindow(action,space.listPlayer)">{{action.pattern}} | </span>-->
                                    <!--</li>-->
                                    <!--<li class="list-group-item" ng-repeat="action in space.gwtSpaceTile.listDoAction">-->
                                        <!--<span ng-click="openClickWindow(action,space.listPlayer)" style="background: url('/static/images/building/buildinga.png')">{{action.pattern}}</span>-->
                                    <!--</li>-->
                                <!--</ul>-->

                            </div>

                            <div class="row">
                                <!--<div class="col-xs-6 col-md-3" ng-repeat="action in space.gwtSpaceTile.listChooseAction"  ng-click="openClickWindow(action,space.listPlayer)">-->
                                <!--<a href="#" class="thumbnail">-->
                                <!--<img style="height: 100%; width: 100%; display: block;" src="/static/images/building/buildinga.png?a=2" data-holder-rendered="true">-->
                                <!--</a>-->
                                <!--</div>-->
                                <div class="col-xs-6 col-md-3" ng-repeat="action in space.gwtSpaceTile.listDoAction" ng-click="openClickWindow(action,space.listPlayer)">
                                    <!--ng-click="openClickWindow(action,space.listPlayer)"-->
                                    <a class="thumbnail">
                                        <img style="height: 100%; width: 100%; display: block;" src="/static/images/building/buildingb.png?a=2" data-holder-rendered="true">
                                        <span>{{action.pattern}}</span>
                                    </a>
                                </div>
                            </div>

                            <div  ng-if="space.gwtSpaceTile.gwtPlayer==null">
                            </div>
                            <div  ng-if="space.gwtSpaceTile.gwtPlayer!=null" style="background-color: {{space.gwtSpaceTile.gwtPlayer.color}}">
                                {{space.gwtSpaceTile.gwtPlayer.userName}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--玩家-->
    <div class="row">
        &nbsp;玩家信息:
        <div class="panel panel-default" ng-repeat="player in gameProperties.listPlayer">
            <div class="panel-heading">
                {{player.userName}}  {{player.color}}
                <div class="btn-group" role="group" aria-label="First group">
                    <button type="button" class="btn btn-default">金钱:{{player.coins}}</button>
                    <button type="button" class="btn btn-default">移动:{{player.moveSpaces}}</button>
                    <button type="button" class="btn btn-default">手牌:{{player.listCardHand.length}}</button>
                    <button type="button" class="btn btn-default">摸牌:{{player.listCardPile.length}}</button>
                </div>
            </div>
            <div class="panel-body">
                <!--手牌-->
                <div class="row">
                    <div class="col-xs-1 col-md-1" ng-repeat="card in player.listCardHand|orderBy:'color'">
                        <div class="panel panel-default" style="">
                            <div class="panel-body" style="border:0px solid {{card.color}};text-align:center;">
                                {{card.number}} - {{card.vpoints}}VP
                                <br/>
                                <span style="background-color: {{card.color}}">{{card.color}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-1 col-md-1">
                        <div class="panel panel-default" style="">
                            <div class="panel-body" style="border:0px solid {{card.color}};text-align:center;">
                                draw pile
                                <br/>
                                {{player.listCardPile.length}}
                            </div>
                        </div>
                    </div>
                </div>
                <!--任务卡-->
                <div class="row">
                    <div class="col-xs-1 col-md-1" ng-repeat="card in player.listCardObjective">
                        <div class="panel panel-default" style="">
                            <div class="panel-body" style="text-align:center;">
                                {{card.info}}
                                <br/>
                                {{card.vpointsNegative}}/{{card.vpoints}}VP
                            </div>
                        </div>
                    </div>
                </div>
                <!--建筑-->
            </div>
        </div>
    </div>
    <!--市场-->
    <div class="row">
        <div class="col-xs-6 col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">工人市场</div>
                <div class="panel-body">
                    <div class="row" ng-repeat="index in [0,1,2,3,4,5,6,7,8,9,10,11]">
                        <div class="col-xs-2 col-md-2" ng-repeat="worker in gameProperties.listSpaceWorker|filter: { row: index }:true | orderBy:'column' ">
                            <div class="panel panel-default" style="">
                                <div class="panel-body">
                                    {{worker.row}} - {{worker.column}}
                                    <br/>
                                    <span ng-if="worker.gwtSpaceTile!=null">
                            {{worker.gwtSpaceTile.info}}
                        </span>
                                    <span class="badge" style="background-color: red" ng-show="worker.offset==1">&nbsp</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="col-xs-6 col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">Cattle market</div>
                <div class="panel-body">
                    <div class="col-xs-2 col-md-2" ng-repeat="card in gameProperties.listCattleCardMarket | orderBy:['number','color'] ">
                        <div class="panel panel-default" style="">
                            <div class="panel-body">
                                {{card.number}} - {{card.vpoints}}VP
                                <br/>
                                <span style="background-color: {{card.color}}">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-2 col-md-2">
                        <div class="panel panel-default" style="">
                            <div class="panel-body">
                                Cattle Pile
                                <br/>
                                <span style="background-color: red">{{gameProperties.listCattleCardPile.length}}</span> Cards
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">Foresight Space</div>
                <div class="panel-body">
                    <div class="row" ng-repeat="index in [0,1,2]">
                        <div class="col-xs-2 col-md-2" ng-repeat="space in gameProperties.listSpaceForesight | filter: { row: index }:true  |orderBy:'column' ">
                            <div class="panel panel-default" style="">
                                <div class="panel-body">
                                    {{space.row}} - {{space.column}}
                                    <br/>
                                    <span ng-if="space.gwtSpaceTile!=null" style="color: {{space.gwtSpaceTile.color}}">{{space.gwtSpaceTile.info}}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">Objective Card</div>
                <div class="panel-body">
                    <div class="col-xs-2 col-md-2" ng-repeat="card in gameProperties.listCardObjectMarket">
                        <div class="panel panel-default" style="">
                            <div class="panel-body">
                                编号:{{card.info}}
                                <br/>
                                {{card.vpointsNegative}}/{{card.vpoints}}VP
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-2 col-md-2">
                        <div class="panel panel-default" style="">
                            <div class="panel-body">
                                Objective Pile
                                <br/>
                                <span style="background-color: red">{{gameProperties.listCardObjectPile.length}}</span> Cards
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>